<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        body{
            margin:0px;
        }
        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
    /**
     * 控件显隐开关
     */
    var viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false, //是否显示投影方式控件
        baseLayerPicker: true,  //是否显示图层选择控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder:false, //是否显示地名查找控件
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false,
        vrButton: false,
        shadows: true, //影子
        infoBox: true //是否显示点击要素之后显示的信息
    });
    /**
     * 地图加载
     */
    viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[3];
    var geojsonOptions = {
        clampToGround : true
    };
    /**
     * 创建面
     * 中国地图：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
     */
    var geojsonOptions = {
        clampToGround : true
    };
    var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', geojsonOptions);
    var neighborhoods;
    // 生成面
    neighborhoodsPromise.then(function(dataSource) {
        viewer.dataSources.add(dataSource);
        neighborhoods = dataSource.entities;
        // 获取enity列表遍历
        var neighborhoodEntities = dataSource.entities.values;
        for (var i = 0; i < neighborhoodEntities.length; i++) {
            var entity = neighborhoodEntities[i];
            if (Cesium.defined(entity.polygon)) {
                // 设置每个entity的name属性和行政区的名称相同
                // entity.name = entity.properties.name;
                entity.polygon.material = Cesium.Color.fromRandom({ // 通过ColorMaterialProperty设置随机颜色Color，而不是把所有的区域都设置成一样的颜色。
                    red : 0.1,
                    maximumGreen : 0.5,
                    minimumBlue : 0.5,
                    alpha : 0.6
                });
                // BOTH 或 CESIUM_3D_TILE 或 TERRAIN
                entity.polygon.classificationType = Cesium.ClassificationType.BOTH;
                var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
                var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
                polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
                entity.position = polyCenter;
                // Generate labels
                console.log('地块名称：',entity.name)
                entity.label = {
                    text : entity.name,
                    showBackground : true, // 文字后是否显示背景
                    // fillColor:Cesium.Color.BLACK,      // 字体颜色
                    // backgroundColor:Cesium.Color.AQUA, // 背景颜色
                    scale : 0.4,
                    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                    // distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
                    // disableDepthTestDistance : Number.POSITIVE_INFINITY,
                    // pixelOffset : new Cesium.Cartesian2(0.0, -15.0), // 向上移（x向右为正，y向下为正）
                };
            }
        }
    });
    // 生成线
    Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(function(dataSource) {
        viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            entity.polyline.width = 10;  //添加默认样式
            entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({
                glowPower: .1, //一个数字属性，指定发光强度，占总线宽的百分比。
                color: Cesium.Color.ORANGERED.withAlpha(.9)
            });
        }
    });
</script>
</body>
</html>
